<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
</span> * @class Ext.core.Element
 */
Ext.core.Element.addMethods({
<span id='Ext-core-Element-method-getAnchorXY'>    /**
</span>     * Gets the x,y coordinates specified by the anchor position on the element.
     * @param {String} anchor (optional) The specified anchor position (defaults to &quot;c&quot;).  See {@link #alignTo}
     * for details on supported anchor positions.
     * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
     * of page coordinates
     * @param {Object} size (optional) An object containing the size to use for calculating anchor position
     * {width: (target width), height: (target height)} (defaults to the element's current size)
     * @return {Array} [x, y] An array containing the element's x and y coordinates
     */
    getAnchorXY : function(anchor, local, s){
        //Passing a different size is useful for pre-calculating anchors,
        //especially for anchored animations that change the el size.
        anchor = (anchor || &quot;tl&quot;).toLowerCase();
        s = s || {};

        var me = this,
            vp = me.dom == document.body || me.dom == document,
            w = s.width || vp ? Ext.core.Element.getViewWidth() : me.getWidth(),
            h = s.height || vp ? Ext.core.Element.getViewHeight() : me.getHeight(),
            xy,
            r = Math.round,
            o = me.getXY(),
            scroll = me.getScroll(),
            extraX = vp ? scroll.left : !local ? o[0] : 0,
            extraY = vp ? scroll.top : !local ? o[1] : 0,
            hash = {
                c  : [r(w * 0.5), r(h * 0.5)],
                t  : [r(w * 0.5), 0],
                l  : [0, r(h * 0.5)],
                r  : [w, r(h * 0.5)],
                b  : [r(w * 0.5), h],
                tl : [0, 0],
                bl : [0, h],
                br : [w, h],
                tr : [w, 0]
            };

        xy = hash[anchor];
        return [xy[0] + extraX, xy[1] + extraY];
    },

<span id='Ext-core-Element-method-anchorTo'>    /**
</span>     * Anchors an element to another element and realigns it when the window is resized.
     * @param {Mixed} element The element to align to.
     * @param {String} position The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
     * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
     * is a number, it is used as the buffer delay (defaults to 50ms).
     * @param {Function} callback The function to call after the animation finishes
     * @return {Ext.core.Element} this
     */
    anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
        var me = this,
            dom = me.dom,
            scroll = !Ext.isEmpty(monitorScroll),
            action = function(){
                Ext.fly(dom).alignTo(el, alignment, offsets, animate);
                Ext.callback(callback, Ext.fly(dom));
            },
            anchor = this.getAnchor();

        // previous listener anchor, remove it
        this.removeAnchor();
        Ext.apply(anchor, {
            fn: action,
            scroll: scroll
        });

        Ext.EventManager.onWindowResize(action, null);

        if(scroll){
            Ext.EventManager.on(window, 'scroll', action, null,
                {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
        }
        action.call(me); // align immediately
        return me;
    },

<span id='Ext-core-Element-method-removeAnchor'>    /**
</span>     * Remove any anchor to this element. See {@link #anchorTo}.
     * @return {Ext.core.Element} this
     */
    removeAnchor : function(){
        var me = this,
            anchor = this.getAnchor();

        if(anchor &amp;&amp; anchor.fn){
            Ext.EventManager.removeResizeListener(anchor.fn);
            if(anchor.scroll){
                Ext.EventManager.un(window, 'scroll', anchor.fn);
            }
            delete anchor.fn;
        }
        return me;
    },

    // private
    getAnchor : function(){
        var data = Ext.core.Element.data,
            dom = this.dom;
            if (!dom) {
                return;
            }
            var anchor = data(dom, '_anchor');

        if(!anchor){
            anchor = data(dom, '_anchor', {});
        }
        return anchor;
    },

    getAlignVector: function(el, spec, offset) {
        var me = this,
            side = {t:&quot;top&quot;, l:&quot;left&quot;, r:&quot;right&quot;, b: &quot;bottom&quot;},
            thisRegion = me.getRegion(),
            elRegion;

        el = Ext.get(el);
        if(!el || !el.dom){
            //&lt;debug&gt;
            Ext.Error.raise({
                sourceClass: 'Ext.core.Element',
                sourceMethod: 'getAlignVector',
                msg: 'Attempted to align an element that doesn\'t exist'
            });
            //&lt;/debug&gt;
        }

        elRegion = el.getRegion();
    },

<span id='Ext-core-Element-method-getAlignToXY'>    /**
</span>     * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
     * supported position values.
     * @param {Mixed} element The element to align to.
     * @param {String} position (optional, defaults to &quot;tl-bl?&quot;) The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @return {Array} [x, y]
     */
    getAlignToXY : function(el, p, o){
        el = Ext.get(el);

        if(!el || !el.dom){
            //&lt;debug&gt;
            Ext.Error.raise({
                sourceClass: 'Ext.core.Element',
                sourceMethod: 'getAlignToXY',
                msg: 'Attempted to align an element that doesn\'t exist'
            });
            //&lt;/debug&gt;
        }

        o = o || [0,0];
        p = (!p || p == &quot;?&quot; ? &quot;tl-bl?&quot; : (!(/-/).test(p) &amp;&amp; p !== &quot;&quot; ? &quot;tl-&quot; + p : p || &quot;tl-bl&quot;)).toLowerCase();

        var me = this,
            d = me.dom,
            a1,
            a2,
            x,
            y,
            //constrain the aligned el to viewport if necessary
            w,
            h,
            r,
            dw = Ext.core.Element.getViewWidth() -10, // 10px of margin for ie
            dh = Ext.core.Element.getViewHeight()-10, // 10px of margin for ie
            p1y,
            p1x,
            p2y,
            p2x,
            swapY,
            swapX,
            doc = document,
            docElement = doc.documentElement,
            docBody = doc.body,
            scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,
            scrollY = (docElement.scrollTop || docBody.scrollTop || 0)+5,
            c = false, //constrain to viewport
            p1 = &quot;&quot;,
            p2 = &quot;&quot;,
            m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);

        if(!m){
            //&lt;debug&gt;
            Ext.Error.raise({
                sourceClass: 'Ext.core.Element',
                sourceMethod: 'getAlignToXY',
                el: el,
                position: p,
                offset: o,
                msg: 'Attemmpted to align an element with an invalid position: &quot;' + p + '&quot;'
            });
            //&lt;/debug&gt;
        }

        p1 = m[1];
        p2 = m[2];
        c = !!m[3];

        //Subtract the aligned el's internal xy from the target's offset xy
        //plus custom offset to get the aligned el's new offset xy
        a1 = me.getAnchorXY(p1, true);
        a2 = el.getAnchorXY(p2, false);

        x = a2[0] - a1[0] + o[0];
        y = a2[1] - a1[1] + o[1];

        if(c){
           w = me.getWidth();
           h = me.getHeight();
           r = el.getRegion();
           //If we are at a viewport boundary and the aligned el is anchored on a target border that is
           //perpendicular to the vp border, allow the aligned el to slide on that border,
           //otherwise swap the aligned el to the opposite border of the target.
           p1y = p1.charAt(0);
           p1x = p1.charAt(p1.length-1);
           p2y = p2.charAt(0);
           p2x = p2.charAt(p2.length-1);
           swapY = ((p1y==&quot;t&quot; &amp;&amp; p2y==&quot;b&quot;) || (p1y==&quot;b&quot; &amp;&amp; p2y==&quot;t&quot;));
           swapX = ((p1x==&quot;r&quot; &amp;&amp; p2x==&quot;l&quot;) || (p1x==&quot;l&quot; &amp;&amp; p2x==&quot;r&quot;));


           if (x + w &gt; dw + scrollX) {
                x = swapX ? r.left-w : dw+scrollX-w;
           }
           if (x &lt; scrollX) {
               x = swapX ? r.right : scrollX;
           }
           if (y + h &gt; dh + scrollY) {
                y = swapY ? r.top-h : dh+scrollY-h;
            }
           if (y &lt; scrollY){
               y = swapY ? r.bottom : scrollY;
           }
        }
        return [x,y];
    },

<span id='Ext-core-Element-method-alignTo'>    /**
</span>     * Aligns this element with another element relative to the specified anchor points. If the other element is the
     * document it aligns it to the viewport.
     * The position parameter is optional, and can be specified in any one of the following formats:
     * &lt;ul&gt;
     *   &lt;li&gt;&lt;b&gt;Blank&lt;/b&gt;: Defaults to aligning the element's top-left corner to the target's bottom-left corner (&quot;tl-bl&quot;).&lt;/li&gt;
     *   &lt;li&gt;&lt;b&gt;One anchor (deprecated)&lt;/b&gt;: The passed anchor position is used as the target element's anchor point.
     *       The element being aligned will position its top-left corner (tl) to that point.  &lt;i&gt;This method has been
     *       deprecated in favor of the newer two anchor syntax below&lt;/i&gt;.&lt;/li&gt;
     *   &lt;li&gt;&lt;b&gt;Two anchors&lt;/b&gt;: If two values from the table below are passed separated by a dash, the first value is used as the
     *       element's anchor point, and the second value is used as the target's anchor point.&lt;/li&gt;
     * &lt;/ul&gt;
     * In addition to the anchor points, the position parameter also supports the &quot;?&quot; character.  If &quot;?&quot; is passed at the end of
     * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
     * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
     * that specified in order to enforce the viewport constraints.
     * Following are all of the supported anchor positions:
&lt;pre&gt;
Value  Description
-----  -----------------------------
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner
&lt;/pre&gt;
Example Usage:
&lt;pre&gt;&lt;code&gt;
// align el to other-el using the default positioning (&quot;tl-bl&quot;, non-constrained)
el.alignTo(&quot;other-el&quot;);

// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo(&quot;other-el&quot;, &quot;tr?&quot;);

// align the bottom right corner of el with the center left edge of other-el
el.alignTo(&quot;other-el&quot;, &quot;br-l?&quot;);

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo(&quot;other-el&quot;, &quot;c-bl&quot;, [-6, 0]);
&lt;/code&gt;&lt;/pre&gt;
     * @param {Mixed} element The element to align to.
     * @param {String} position (optional, defaults to &quot;tl-bl?&quot;) The position to align to.
     * @param {Array} offsets (optional) Offset the positioning by [x, y]
     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
     * @return {Ext.core.Element} this
     */
    alignTo : function(element, position, offsets, animate){
        var me = this;
        return me.setXY(me.getAlignToXY(element, position, offsets),
                        me.anim &amp;&amp; !!animate ? me.anim(animate) : false);
    },

    // private ==&gt;  used outside of core
    adjustForConstraints : function(xy, parent) {
        var vector = this.getConstrainVector(parent, xy);
        if (vector) {
            xy[0] += vector[0];
            xy[1] += vector[1];
        }
        return xy;
    },

<span id='Ext-core-Element-method-getConstrainVector'>    /**
</span>     * &lt;p&gt;Returns the &lt;code&gt;[X, Y]&lt;/code&gt; vector by which this element must be translated to make a best attempt
     * to constrain within the passed constraint. Returns &lt;code&gt;false&lt;/code&gt; is this element does not need to be moved.&lt;/p&gt;
     * &lt;p&gt;Priority is given to constraining the top and left within the constraint.&lt;/p&gt;
     * &lt;p&gt;The constraint may either be an existing element into which this element is to be constrained, or
     * an {@link Ext.util.Region Region} into which this element is to be constrained.&lt;/p&gt;
     * @param constrainTo {Mixed} The Element or {@link Ext.util.Region Region} into which this element is to be constrained.
     * @param proposedPosition {Array} A proposed &lt;code&gt;[X, Y]&lt;/code&gt; position to test for validity and to produce a vector for instead
     * of using this Element's current position;
     * @returns {Array} &lt;b&gt;If&lt;/b&gt; this element &lt;i&gt;needs&lt;/i&gt; to be translated, an &lt;code&gt;[X, Y]&lt;/code&gt;
     * vector by which this element must be translated. Otherwise, &lt;code&gt;false&lt;/code&gt;.
     */
    getConstrainVector: function(constrainTo, proposedPosition) {
        if (!(constrainTo instanceof Ext.util.Region)) {
            constrainTo = Ext.get(constrainTo).getViewRegion();
        }
        var thisRegion = this.getRegion(),
            vector = [0, 0],
            shadowSize = this.shadow &amp;&amp; this.shadow.offset,
            overflowed = false;

        // Shift this region to occupy the proposed position
        if (proposedPosition) {
            thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
        }

        // Reduce the constrain region to allow for shadow
        // TODO: Rewrite the Shadow class. When that's done, get the extra for each side from the Shadow.
        if (shadowSize) {
            constrainTo.adjust(0, -shadowSize, -shadowSize, shadowSize);
        }

        // Constrain the X coordinate by however much this Element overflows
        if (thisRegion.right &gt; constrainTo.right) {
            overflowed = true;
            vector[0] = (constrainTo.right - thisRegion.right);    // overflowed the right
        }
        if (thisRegion.left + vector[0] &lt; constrainTo.left) {
            overflowed = true;
            vector[0] = (constrainTo.left - thisRegion.left);      // overflowed the left
        }

        // Constrain the Y coordinate by however much this Element overflows
        if (thisRegion.bottom &gt; constrainTo.bottom) {
            overflowed = true;
            vector[1] = (constrainTo.bottom - thisRegion.bottom);  // overflowed the bottom
        }
        if (thisRegion.top + vector[1] &lt; constrainTo.top) {
            overflowed = true;
            vector[1] = (constrainTo.top - thisRegion.top);        // overflowed the top
        }
        return overflowed ? vector : false;
    },

<span id='Ext-core-Element-method-getCenterXY'>    /**
</span>    * Calculates the x, y to center this element on the screen
    * @return {Array} The x, y values [x, y]
    */
    getCenterXY : function(){
        return this.getAlignToXY(document, 'c-c');
    },

<span id='Ext-core-Element-method-center'>    /**
</span>    * Centers the Element in either the viewport, or another Element.
    * @param {Mixed} centerIn (optional) The element in which to center the element.
    */
    center : function(centerIn){
        return this.alignTo(centerIn || document, 'c-c');
    }
});
</pre>
</body>
</html>
